﻿<section>
    <ul class="nav nav-pills" id="FriendshipTabs">
        <li><a href="#MyFriends">My friends</a></li>
        <li><a href="#FriendshipRequests">Friendship Requests</a></li>
        <li><a href="#SentRequests">Sent Requests</a></li>
    </ul>
    <div class="tab-content" style="margin-top: 10px;">
        <div class="tab-pane" id="MyFriends">
            <a class="abp-clickable" data-bind="click: showAddNewFriendDialog">+ Add new friend</a>
            <ul class="list-group friend-list-detailed" data-bind="foreach: friendships">
                <!-- ko if: status() == 2 -->
                <li class="list-group-item">
                    <img data-bind="attr: { src: friend.profileImage() }" />
                    <div class="row">
                        <div class="col-xs-8">
                            <div class="user-info">
                                <div>
                                    <a data-bind="attr: { href: '#user/' + friend.id() }">
                                        <span data-bind="html: friend.name() + ' ' + friend.surname()"></span>
                                    </a>
                                </div>
                                <div>
                                    <input class="checkbox-friendship-canAssignTask" type="checkbox" data-bind="checked: canAssignTask" />
                                    Can assign tasks to me<br />
                                    <input class="checkbox-friendship-followActivities" type="checkbox" data-bind="checked: followActivities" />
                                    Follow activities
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <button class="btn btn-link pull-right" data-bind="click: $root.removeFriendship"><span class="glyphicon glyphicon-remove-circle"></span>&nbsp;Delete</button>
                        </div>
                    </div>
                </li>
                <!-- /ko -->
            </ul>
        </div>
        <div class="tab-pane" id="FriendshipRequests">
            <ul class="list-group friend-list-detailed" data-bind="foreach: friendships">
                <!-- ko if: status() == 1 -->
                <li class="list-group-item">
                    <img data-bind="attr: { src: friend.profileImage() }" />
                    <div class="user-info">
                        <div>
                            <a data-bind="attr: { href: '#user/' + friend.id() }">
                                <span data-bind="html: friend.name() + ' ' + friend.surname()"></span>
                            </a>
                        </div>
                        <div>
                            Waiting since <span data-bind="text: creationTime"></span>
                            <br />
                            <a class="abpclickable" data-bind="click: $root.acceptFriendship"><i class="icon-check" />&nbsp;Accept</a>&nbsp;&nbsp;
                            <a class="abp-clickable" data-bind="click: $root.rejectFriendship"><i class="icon-ban-circle" />&nbsp;Reject</a>
                        </div>
                    </div>
                </li>
                <!-- /ko -->
            </ul>
        </div>
        <div class="tab-pane" id="SentRequests">
            <ul class="list-group friend-list-detailed" data-bind="foreach: friendships">
                <!-- ko if: status() == 0 -->
                <li class="list-group-item">
                    <img data-bind="attr: { src: friend.profileImage() }" />
                    <div class="user-info">
                        <div>
                            <a data-bind="attr: { href: '#user/' + friend.id() }">
                                <span data-bind="html: friend.name() + ' ' + friend.surname()"></span>
                            </a>
                        </div>
                        <div>
                            <span data-bind="text: moment(creationTime()).fromNow()"></span>
                            <br />
                            <a class="abp-clickable" data-bind="click: $root.cancelFriendshipRequest"><i class="icon-ban-circle" />&nbsp;Cancel</a>
                        </div>
                    </div>
                </li>
                <!-- /ko -->
            </ul>
        </div>
    </div>
</section>
